<template>
	<view class="w-screen h-screen bg-[#1AAD19] flex flex-col" :style="themeColor()">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{ 'height': headerHeight }">
			<top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" />
		</view>
		<!-- #endif -->
		<view>

			<view class="title bg-[#1AAD19] pt-[140rpx]  text-[44rpx] text-[#fff] pl-[36rpx] flex items-center "
				style="text-align: left;">
				<image class="w-[40rpx] h-[40rpx] mr-[10rpx]"
					src="https://files.meton.vip/5834cb89e15905795429a4a899629eee64eada37eb7f121a430a81ffae50955d.png">
				</image> 重置消费密码
			</view>
			<view class="bg-[#1AAD19] h-[100%] pt-[40rpx]">
				<view
					class="flex flex-col  mx-[20rpx] bg-[#fff] justify-center rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)]">
					<view class="text-[32rpx] font-bold">请输入{{
						nickNameFormat(memeberInfo?.nickname ? memeberInfo?.nickname : '') }}的消费密码
					</view>
					<view class="flex items-center py-[30rpx] justify-center w-[100%]">
						<u-code-input v-model="formData.password" :maxlength="6" :space="0" dot borderColor="#1AAD19"
							size="55"></u-code-input>
					</view>
					<view class="mt-[160rpx]">
						<button
							class="w-full h-[80rpx] !bg-[#1AAD19] text-[32rpx] rounded-[40rpx] leading-[80rpx] font-500 !text-[#fff]"
							@click="handleConfirm">{{ t('confirm') }}</button>
					</view>
				</view>


			</view>


		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { t } from '@/locale'
import { resetPassword } from '@/app/api/shopMember';
import { nickNameFormat } from '@/utils/formatting';

import { goback, pxToRpx } from '@/utils/common'
import { topTabar } from '@/utils/topTabbar'

let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({ title: '', topStatusBar: { bgColor: '#fff', textColor: '#333' } })
/********* 自定义头部 - end ***********/
const headerHeight = computed(() => {
	return Object.keys(menuButtonInfo).length ? pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) + 'rpx' : 'auto'
})
const formData = reactive({

	password: '',
})
const memeberInfo = ref()

const real_name_input = ref(true);
onMounted(() => {
	memeberInfo.value = uni.getStorageSync('wapShopMember')

	// 防止浏览器自动填充
	setTimeout(() => {
		real_name_input.value = false;
	}, 800)
});

const loading = ref(false)
const formRef: any = ref(null)






const handleConfirm = () => {
	if (formData.password == '') {
		uni.showToast({
			title: '请输入消费密码',
			icon: 'none'
		})
		return
	}
	if (formData.password.length < 6) {
		uni.showToast({
			title: '请输入正确的消费密码',
			icon: 'none'
		})
		return
	}
	if (loading.value) return
	loading.value = true

	resetPassword({ paypasswd: formData.password }).then((res: any) => {

		goback({ title: '重置成功', url: '/app/pages/shopMember/member' })

	}).catch(() => {
		loading.value = false
	})

}
</script>

<style lang="scss" scoped>
:deep(.u-input) {
	background-color: transparent !important;
}

:deep(.u-checkbox) {
	margin: 0 !important;
}

:deep(.u-form-item) {
	flex: 1;

	.u-line {
		display: none;
	}
}
</style>